{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}琢越网{% endblock %}

{% block custom_js %}<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>{% endblock %}
{% block custom_css %}<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">{% endblock %}

{% block content %}
				<div id="middleBox" class="col-md-9 column "> <!消息展示区>
					<ul class="nav nav-pills nav-justified"><!--导航式式次导航-->
							<li >
								 <a href="personal-center.html" >消息<span class="badge col-badge col-badge-p">3</span></a><!--如果span内文字为空会自动叠起来-->
							</li>
							<li class="active">
								 <a href="#" >好友动态<span class="badge col-badge col-badge-p">3000+</span></a><!--如果span内文字为空会自动叠起来-->
							</li>
							<li >
								 <a href="#" >我的收藏</a><!--如果span内文字为空会自动叠起来-->
							</li>
							<li>
								 <a href="#" >我的发表</a><!--如果span内文字为空会自动叠起来-->
							</li>

						</ul>
					<!--按钮组式次导航-->
					<!--div class="btn-group btn-group-justified">
						<div class="btn-group">
							<button type="button" class="btn btn-warning">消息<span class="badge col-badge">3</span></button>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-warning">好友动态<span class="badge col-badge">300+</span></button>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-warning">我的收藏</button>
						</div>
						<div class="btn-group">
							<button type="button" class="btn btn-warning">我的发表</button>
						</div>
					</div-->
					<br>
					<div class="row row-mar-lg clearfix col-div"><!--好友动态-->
							<div class="row">
								<a href="#" style="text-decoration:none;color:black" target=_blank><img src="{% static 'img/2.jpg' %}"  class="profile-xs"/>用户A</a>
								<label class="tool" style="margin:0 15px 0 15px">发表了一篇笔记</label>
								<p class="pull-right tool">2017-5-1</p> <!!!>
							</div>
						<div class="sub-div-sm sub-margin">
							<a href="note.html" target=_blank style="text-decoration:none;color:black;">
								<h4 class="col-h4" >怎么学软件工程这门课？<span class="badge col-badge col-badge-n">笔记</span></h4>
								Music里华语歌排行，看起来大体还是挺正常的。前两年好好的啊，
								即使满大街放，甭管邓紫棋的泡沫也好，还是朴师傅的平凡之路、我本命的小幸运，周董告白气球这些，这里面最
								差的起码还有点营养，
							</a>
						</div>
						<a role="button" class="btn tool">
								<span class="glyphicon glyphicon-thumbs-up" ></span>点赞</a>
							<a role="button" class="btn tool">
								<span class="glyphicon glyphicon-thumbs-down" ></span>没用</a>
							<a onclick="copyUrl()" role="button" class="btn tool">
								<span class="glyphicon glyphicon-link" ></span>分享
							</a>
							<a onclick="collect()" role="button" class="btn tool">
								<span class="glyphicon glyphicon-star"></span>收藏
							</a>
							<a href="#modal-container-tip-off" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-exclamation-sign" >举报
							</a>
							<!举报模态框>
							<div class="modal fade" id="modal-container-tip-off" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header"> <!头>
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h4 class="modal-title" id="myModalLabel">举报</h4>
										</div>
										<div class="modal-body"> <!中间部分>
											<textarea class="form-control" style="height:200px" placeholder="请填写举报信息"></textarea>
										</div>
										<div class="modal-footer"> <!脚>
											<button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
										</div>
									</div>
								</div>
							</div>
							<a role="button" class="but-click btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-pencil" >评论
							</a>
							<div class="pull-right tool">
								<label>浏览：</label>xxx
								<label>收藏：</label>xxx
							</div>
							<!评论框>
							<div  class="remark-div" style="display:none" >
								<textarea class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
								<button type="submit" class="btn btn-default pull-right publish">发表</button>
							</div>
					</div>

				</div>

				<div class="col-md-3 column"> <!右部分>
					<div id="userInformation" class="row clearfix col-div" >	<!用户信息（未登录前设其style="dispaly:none"）>
						<a class="btn big-but pull-left" href="#">
							<img alt="140x140" class="img" src="{% static 'img/man2.png' %}" width=50% style="margin-top:10px">
						</a>
						<h4 style="text-align:center">{{ user.username }}</h4>
						<p style="color:gray;text-align:center">{{ user.introduction }}</p>
						<a class="btn big-but pull-left" href="{% url 'users:user_info' %}">个人中心</a>
						<a class="btn big-but pull-right" href="{% url 'logout' %}">退出登录</a>
					</div>
					<div class="row row-mar-lg clearfix col-div"> <!我关注用户>
						<h4 class="text-center col-h4">我关注用户</h4>
						<hr>
						<div class="right-div">
							<img src="{% static 'img/man2.png' %}" width=40px height=40px/>
							<a href="#" class="right-text">用户A</a>
						</div>
					</div>
					<div class="row row-mar-lg clearfix col-div"> <!关注我用户>
						<h4 class="text-center col-h4">关注我用户</h4>
						<hr>
						<div class="right-div">
							<img src="{% static 'img/man2.png' %}" width=40px height=40px/>
							<a href="#" class="right-text">用户A</a>
						</div>
					</div>
				</div>
	</div>
{% endblock %}
{% block custom_script %}
<script>
// -对评论框的控制-
	$(document).ready(function(){
		var div;
		// 显示or隐藏评论框
		$(".but-click").click(function(){
			div= $(this).parent("div").parent("div").find(".remark-div"); //取button的div父级d的div父级，再通过.remark-div类找到评论框
			var display = div.css("display");
			if( display=="none")
				div.css("display","block");
			else
				div.css("display","none");
			//div[0].style.display = "block"; //设置div的style为可见
		});
		// 判断评论是否有效
		$(".publish").click(function(){
			var comment =  $(this).parent("div").find("textarea")[0].value;
			console.log(comment);
			if( typeof(comment)=="undefined" || comment=="")
				alert("评论为空！");
			else{
				div.css("display","none");
				alert("发表成功!");
			}
		});
	});




</script>
{% endblock %}
